<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省-市-区,三级联动</title>


    <link rel="stylesheet" type="text/css" href="/static/js/layui-v2.5.7/layui/css/layui.css">
    <script type="text/javascript" src="/static/js/layui-v2.5.7/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/myJs.js"></script>


</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">省-市-区</label>
        <div class="layui-input-inline">
            <select id="province"  lay-filter="province">
            </select>
        </div>

        <div class="layui-input-inline">
            <select id="city" lay-filter="city">
            </select>
        </div>


        <div class="layui-input-inline">
            <select id="area">
            </select>
        </div>


    </div>
</form>

<script>

    function province(form) {
        $.ajax({
            dataType: 'json',
            url: '/ow_test/Ow/province',
            type: 'POST',
            success: function (data) {
                var html = '<option value="0"></option>';
                data.forEach(function (value, index) {
                    //console.log(value.name);
                    html = html + '<option value="'+value.id+'">' + value.name + "</option>"
                })
                $("#province").html(html);
                form.render("select");
            }
        })
    }

     function city(id,form){
         $.ajax({
             dataType: 'json',
             url: '/ow_test/Ow/city',
             type: 'POST',
             data:{
                 'id':id
             },
             success:function (data) {
                 var html = '';
                 data.forEach(function (value, index) {
                     //console.log(value.name);
                     html = html + '<option value="'+value.id+'">' + value.name + "</option>"
                 })
                 $("#city").html(html);
                 form.render("select");

                 //如果要在点击省级时候区级也会自动跳转的话，则必须加上这一句话
                 area($("#city").val(),form);

             }
         })
     }

    function area(id,form){
        $.ajax({
            dataType: 'json',
            url: '/ow_test/Ow/area',
            type: 'POST',
            data:{
                'id':id
            },
            success:function (data) {
                var html = '';
                data.forEach(function (value, index) {
                    //console.log(value.name);
                    html = html + '<option value="'+value.id+'">' + value.name + "</option>"
                })
                $("#area").html(html);
                form.render("select");
            }
        })
    }




    $(function () {
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table,
                form = layui.form,
                layer = layui.layer;

            province(form);

            form.on('select(province)', function(data){
                console.log(data.value); //得到被选中的值
                city(data.value,form);

            });

            form.on('select(city)', function(data){
                console.log(data.value); //得到被选中的值
                area(data.value,form);
            });

        })


    })


</script>


</body>
</html>